<template>
	<view class="index">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" title="促销活动"></nav-bars>
		<!-- 顶部 -->
		<view class="topcont">
			<view class="topinput">
				<view class="i_top">
					<view class="i_tCan" slot="center">
						<view class="i_tInput">
							<view class="i_tiIcon iconfont icon-search"></view>
							<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData"
								placeholder="搜索您感兴趣的商品" placeholder-class="col-ccc" />
						</view>
						<view class="i_tBtn">
							<!-- #ifndef MP-WEIXIN -->
							<view class="i_tbIcon" @click="gitchat()">
								<text class="iconfont iconhuaban110"></text>
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="i_tbIcon" @click="gitchat()" v-if="!config_id && !config_url">
								<text class="iconfont iconhuaban110"></text>
							</view>
							<view class="i_tbIcon" v-else @click="gitpouchatshow">
								<text class="iconfont iconhuaban110"></text>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
			<view class="i_three">
				<view class="i_tSwiper" style="height:260rpx">
					<swiper autoplay interval="5000" duration="350" @change='threeBannerChange'>
						<swiper-item v-for="(item,index) in banner" :key="index">
							<view class="i_tCont" @click="toONEshop(item.link)">
								<image :src="item.img" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="i_tDots">
						<view class="i_tDot" v-for="(item,index) in banner" :key="index"
							:class="{'active': index == threeIndex}">
							<view class="i_tIcon"></view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 功能 -->
		<view class="i_fun">
			<view class="i_fItem" @click="toONEshop('/pages_now/pages/now/update/index')">
				<view class="i_fIcon">
					<image src="https://cos.ryz1620.com/liankun/static/shangxin.png"></image>
				</view>
				<view class="i_fTxt">上新</view>
			</view>
			<view class="i_fItem" @click="toONEshop('/pages_now/pages/now/seckill/index')">
				<view class="i_fIcon">
					<image src="https://cos.ryz1620.com/liankun/static/miaosha.png"></image>
				</view>
				<view class="i_fTxt">秒杀</view>
			</view>
			<view class="i_fItem" @click="toONEshop('/pages_now/pages/now/groupon/index')">
				<view class="i_fIcon">
					<image src="https://cos.ryz1620.com/liankun/static/tuangou.png"></image>
				</view>
				<view class="i_fTxt">团购</view>
			</view>
			<view class="i_fItem" @click="toONEshop('/pages_now/pages/now/vogue/index')">
				<view class="i_fIcon">
					<image src="https://cos.ryz1620.com/liankun/static/baopin.png"></image>
				</view>
				<view class="i_fTxt">爆品</view>
			</view>
			<view class="i_fItem" @click="toONEshop('/pages_now/pages/now/optimization/index')">
				<view class="i_fIcon">
					<image src="https://cos.ryz1620.com/liankun/static/youxuan.png"></image>
				</view>
				<view class="i_fTxt">优选</view>
			</view>
			<!-- <view class="i_fItem">
				<view class="i_fIcon"></view>
				<view class="i_fTxt"></view>
			</view>
			<view class="i_fItem">
				<view class="i_fIcon"></view>
				<view class="i_fTxt"></view>
			</view> -->
		</view>

		<view class="discounts" v-if="conditionlist">
			<view class="discounts-list">
				<view class="discountscont" v-for="(item,index) in conditionlist" :key="index">
					<view class="wrapper">
						<view class="left" @click="discounts(item.id)">
							<view class="pirce" v-if="item.discount_type == 1">￥<text>{{item.discount_money}}</text>
							</view>
							<view class="pirce" v-if="item.discount_type == 2"><text>{{item.discount_money}}</text>折
							</view>
							<view class="pircecom">立即领取</view>
						</view>
						<view class="right">
							<view class="time" style="font-size:36rpx">优惠券</view>
							<view class="time">满{{item.condition}}可用数量</view>
							<!-- <view class="nums">立即领取</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="listname">
		   <view class="names" @click="toONEshop('/pages_now/pages/now/vogue/index')">
			   <view class="namtext">
				   <text>爆品</text>
				   <image src="https://cos.ryz1620.com/liankun/static/product/1-02.png" mode="widthFix"></image>
			   </view>
		   </view>
		   <view class="names" @click="toONEshop('/pages_now/pages/now/seckill/index')">
		   	  <view class="namtext">
				   <text>秒杀</text>
				   <image src="https://cos.ryz1620.com/liankun/static/product/1-01.png" mode="widthFix"></image>
		   	  </view>
		   </view>
		   <view class="names" @click="toONEshop('/pages_now/pages/now/groupon/index')">
			 <view class="namtext">  
		   	  <text>团购</text>
		   	  <image src="https://cos.ryz1620.com/liankun/static/product/1-03.png" mode="widthFix"></image>
			 </view> 
		   </view>
		   <view class="names" @click="toONEshop('/pages_now/pages/now/optimization/index')">
			  <view class="namtext">   
		   	  <text>优选</text>
		   	  <image src="https://cos.ryz1620.com/liankun/static/product/1-04.png" mode="widthFix"></image>
			  </view>
		   </view>
		   <view class="names" @click="toONEshop('/pages_now/pages/now/update/index')">
			   <view class="namtext">  
		   	  <text>每日上新</text>
		   	  <image src="https://cos.ryz1620.com/liankun/static/product/1-06.png" mode="widthFix"></image>
			  </view>
		   </view>
		   <view class="names">
			   <view class="namtext">  
		   	  <text>私人定制</text>
		   	  <image src="https://cos.ryz1620.com/liankun/static/product/1-05.png" mode="widthFix"></image>
			  </view>
		   </view>
	   </view> -->
		<!-- 推荐产品 -->
		<view class="i_recomd">
			<view class="i_tOper" @click="toONEshop('/pages_now/pages/now/update/index')"><text>更多</text>
				<view class="i_toIcon">
					<view class="iconfont icon-more"></view>
				</view>
			</view>
			<view class="i_rTitle">每日推荐</view>
			<!-- <view class="i_rCan">
       		<view class="i_rList">
       			<view class="i_rItem" v-for="(item,index) in relist" :key="index" @click="toONEshop('/pages_mall/pages/mall/goods_details/goods_details?id=' +item.product_id)">
       				<view class="i_rImage">
       					<image :src="item.main_imgurl"></image>
       				</view>
       				<view class="i_rText omit-1">{{item.product_title}}</view>
       				<view class="i_rFee">￥<text class="fs-24 ft-bold mR-4">{{item.price}}</text></view>
       			</view>
       		</view>
       	</view> -->
			<view class="i_rList">
				<view class="list">
					<view class="side-line" v-for="(item,index) in 2" :key="index">
						<navigator class="card"
							:url="`/pages_mall/pages/mall/goods_details/goods_details?id=${items.product_id}`"
							v-if="indexs%2==index" v-for="(items,indexs) in relist" :key="indexs">
							<image lazyLoad="true" mode="widthFix" :src="items.main_imgurl"></image>
							<view class="card-right">
								<view class="name ell-2">{{items.product_title}}</view>
								<view class="price">¥{{items.price}}</view>
								<image class="cart" src="@/static/common/icon_fixed3.png"></image>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottombanner">
			<view class="i_bOper" @click="toONEshop('/pages_now/pages/now/optimization/index')"><text>更多</text><view class="i_boIcon"><view class="iconfont icon-more"></view></view></view>
			<view class="i_bTitle">周周购</view>
			<view class="i_tSwiper" style="height:375rpx">
				<swiper autoplay interval="5000" duration="400" @change='threeBannerChanges'>
					<swiper-item v-for="(item,index) in bannerlist" :key="index">
						<view class="i_tCont"  @click="toONEshop(item.link)">
							<image :src="item.img" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="i_tDots">
					<view class="i_tDot" v-for="(item,index) in bannerlist" :key="index" :class="{'active': index == threeIndexs}"><view class="i_tIcon"></view></view>
				</view>
			</view>
		</view> -->
		<view class="rightfixed">
			<!-- 分享 -->
			<view class="iconfont icontubiaozhizuomoban_fuzhi" v-if="showright"><button open-type="share"
					class="sharebtn"></button></view>
			<!-- 电话-->
			<view class="iconfont iconhuaban3" v-if="showright" @click="callPhone('07738282291')"></view>
			<!-- 购物车 -->
			<view class="iconfont icon-shopping" v-if="showright" @click="malldcart"></view>
			<!-- 导航 -->
			<view class="iconfont iconhuaban4" v-if="showright" @click="openLocation"></view>
			<!-- 二维码 -->
			<!-- <view class="iconfont icon-erweima" v-if="showright"></view> -->
			<!-- 显示 -->
			<view class="iconfont icon-arrow-left-copy" v-if="showright" @click="iconshow"></view>
			<!-- 隐藏 -->
			<view class="iconfont icon-arrow-up" v-if="!showright" @click="iconshow"></view>
		</view>
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage='startmessage'
							bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_mall from '@/service/mall.js'
	import URL from '@/config/url.js'


	export default {
		components: {
			// #ifdef MP-WEIXIN
			"cell": "plugin://contactPlugin/cell",
			// #endif
		},
		data() {
			return {
				banner: [],
				threeIndex: 0,
				threeIndexs: 0,
				threeIndexx: 0,
				bannerlist: [],
				userId: "",
				searchVal: '',
				relist: [],
				conditionlist: [],
				latitude: "",
				longitude: "",
				showright: false,
			}
		},
		onLoad(params) {
			this.$utils.getUrl()
			this.banners()
			this.bannerlists()
			this.recommendList()
			this.condition()
			this.gitConfig()
			this.gitwxConfig()
			let lng = uni.getStorageSync('location_longitude')
			if (lng) {
				this.longitude = uni.getStorageSync('location_longitude')
				this.latitude = uni.getStorageSync('location_latitude')
			} else {
				this.getlng()
			}
			this.userId = uni.getStorageSync('userId')
			let token = uni.getStorageSync('token')
			if (params.share_uid) {
				let shareuId = params.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if (token && shareuId) {
					service_mall.getPromoter({
							share_uid: shareuId
						})
						.then(res => {})
				}
			}
		},
		filters: {
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d;
			}
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') {}
			return {
				title: '融易装',
				path: '/pages_now/pages/now/promotion/index?share_uid=' + this.userId,
				success: function(res) {}
			}
		},
		methods: {
			// 3D-轮播图切换
			threeBannerChange(e) {
				this.threeIndex = e.detail.current
			},
			// 3D-轮播图切换
			threeBannerChanges(e) {
				this.threeIndexs = e.detail.current
			},
			// 优惠券切换
			threeBannerChangex(e) {
				this.threeIndexx = e.detail.current
			},
			searchData() {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/goods/list?keyword=' + this.searchVal
				})
			},
			toONEshop(url) {
				uni.navigateTo({
					url
				});
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({
					partner_type: 'root',
					partner_id: 1
				}).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({
					partner_type: 'root',
					partner_id: 1
				}).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow() {
				this.pouchatshow = true
			},
			wxCodeClick() {
				this.pouchatshow = false
			},
			gitwxchat() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.config_url
					},
					corpId: this.$env.CORPID,
					success(res) {}
				})
			},
			// 客服
			gitchat() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
				// let token = uni.getStorageSync('token')
				// if(token){
				// 	uni.navigateTo({
				// 		url:"/pages_customer/pages/index?partner_type=root&partner_id=0"
				// 	})
				// }else{
				// 	uni.showModal({
				// 	    title: "提示！",
				// 	    content: "请先登录！",
				// 	    success: function(s) {
				// 	        if (s.confirm) {
				// 	           uni.navigateTo({
				// 	           	url: '/pages_login/pages/login/login/index',
				// 	           });
				// 	        }
				// 	    }
				// 	});
				// }
			},
			iconshow() {
				this.showright = !this.showright
			},
			getlng() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitud
						uni.setStorageSync('location_longitude', res.longitude);
						uni.setStorageSync('location_latitude', res.latitude);
					}
				});
			},
			// 电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 购物车
			malldcart() {
				uni.navigateTo({
					url: `/pages_mall/pages/mall/cart/cart`
				})
			},
			openLocation() {
				let latitude = Number(this.latitude)
				let longitude = Number(this.longitude)
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: '联坤家居广场',
					address: '桂林市叠彩区环城北一路39号',
					scale: 20
				});
			},
			// banner
			banners() {
				service_mall.index_getBanner({
					type: 17
				}).then(res => {
					if (res.code == 1) {
						this.banner = res.data
					}
				});
			},
			// 每日推荐接口
			recommendList() {
				service_mall.recommendList({}).then(res => {
					if (res.code == 1) {
						this.relist = res.data
					}
				});
			},
			// 优惠券
			condition() {
				service_mall.condition({}).then(res => {
					if (res.code == 1) {
						this.conditionlist = res.data.cut
					}
				});
			},
			discounts(id) {
				service_mall.discounts({
					coupon_id: id
				}).then(res => {
					if (res.code == 1) {
						this.condition()
						uni.showToast({
							title: "领取成功！",
							icon: "none"
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			// 底部
			bannerlists() {
				service_mall.index_getBanner({
					type: 22
				}).then(res => {
					if (res.code == 1) {
						this.bannerlist = res.data
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		display: flex;
		flex-flow: column;
	}

	.topcont {
		position: relative;
		width: 100%;
		position: relative;
		z-index: 1;
		overflow: hidden;
	}

	.topinput {
		width: 100%;
		z-index: 99;
	}

	.i_top {
		margin-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 120rpx;
		position: relative;

		.i_tCan {
			width: 100%;
		}

		.i_tBtn {
			width: 100rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 10rpx;
			top: 0;
		}

		.i_tbIcon {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #999;
			font-size: 42rpx;
		}

		.i_tbTxt {
			height: 28rpx;
			line-height: 28rpx;
			font-size: 20rpx;
			margin-top: 4rpx;
		}

		.i_tInput {
			height: 60rpx;
			border-radius: 36rpx;
			background: rgba(240, 240, 240, 0.7);
			position: relative;
			overflow: hidden;

			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding: 0 24rpx 0 72rpx;
			}
		}

		.i_tiIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #ccc;
			font-size: 32rpx;
			margin-top: -16rpx;
			position: absolute;
			top: 50%;
			left: 28rpx;
		}
	}

	.topcont .i_three {
		margin: 24rpx 32rpx;
		border-radius: 10rpx;
		background: #fff;
		overflow: hidden;
	}

	.i_tSwiper {
		position: relative;
	}

	.i_tDots {
		width: 100%;
		position: absolute;
		bottom: 15rpx;
		left: 0;
		display: flex;
		justify-content: center;
	}

	.i_tDot {
		width: 50rpx;
		height: 6rpx;
		margin: 0 5rpx;

		&.active .i_tIcon {
			background: #ffd425;
		}

		.i_tIcon {
			width: 50rpx;
			height: 6rpx;
			background: rgba(255, 255, 255, .5);
		}
	}

	// 功能
	.i_fun {
		display: flex;
		padding: 10rpx;
		padding-top: 0;
		.i_fItem {
			flex: 1;
		}

		.i_fIcon {
			width: 80rpx;
			height: 80rpx;
			margin: 20rpx auto 0;
		}

		.i_fTxt {
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			font-size: 26rpx;
			margin-top: 14rpx;
		}
	}

	.infodata {
		background: #fff;
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 60rpx;

		.infoc {
			border: 1px #eb1d21 solid;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			border-radius: 40rpx;

			.iconfont {
				display: flex;
				color: #eb1d21;
				font-size: 34rpx;
				width: 80rpx;
				justify-content: center;
			}

			.infocont {
				color: #eb1d21;
			}
		}
	}

	.kficon {
		position: absolute;
		bottom: 100rpx;
		width: 220rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		background: #ffbe00;
		left: 50%;
		margin-left: -90rpx;
	}

	.i_bOper {
		height: 62rpx;
		line-height: 62rpx;
		font-size: 24rpx;
		padding: 0 64rpx;
		margin-top: 30rpx;
		position: relative;
		float: right;

		.i_boIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			color: #6c6c6c;
			font-size: 32rpx;
			margin-top: -16rpx;
			position: absolute;
			top: 50%;
			right: 32rpx;
		}
	}

	.i_bTitle {
		height: 110rpx;
		line-height: 122rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 32rpx;
	}

	// 推荐产品
	.i_recomd {
		margin-top: 24rpx;

		.i_rOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 72rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_roIcon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_tOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_toIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_rTitle {
			height: 110rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}

		.i_rCan {
			height: 470rpx;
			overflow: hidden;
		}

		.i_rList {
			padding: 0 28rpx;
			white-space: nowrap;
		}

		.i_rItem {
			width: 350rpx;
			margin-right: 24rpx;
			display: inline-block;

			&:nth-last-child(1) {
				margin-right: 0;
			}
		}

		.i_rImage {
			width: 100%;
			height: 350rpx;
			border-radius: 8rpx;
			background: #f6f7fb;
			position: relative;
			overflow: hidden;
		}

		.i_rTag {
			height: 40rpx;
			line-height: 40rpx;
			color: #fff;
			font-size: 20rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			background: #030303;
			position: absolute;
			top: 16rpx;
			left: 16rpx;
		}

		.i_rText {
			width: 340rpx;
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			font-weight: bold;
			margin-top: 16rpx;
		}

		.i_rFee {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 16rpx;
			margin-top: 8rpx;
			color: red;
		}
	}

	.discountscont {
		display: inline-block;
		width: 450rpx;
	}

	.discounts-list {
		white-space: nowrap;
		padding-left: 30rpx;
		overflow-x: auto;

		.wrapper {
			display: flex;
			position: relative;
			height: 160rpx;
			margin: 30rpx;
			margin-left: 0;
			filter: drop-shadow(1px 1px 1px #ffced0);
		}

		.wrapper view {
			height: 100%;
		}

		.left {
			position: relative;
			background: #58a;
			background: radial-gradient(circle at top right, transparent 5px, #fff0f0 0) top right, radial-gradient(circle at bottom right, transparent 5px, #fff0f0 0) bottom right;
			background-size: 100% 60%;
			background-repeat: no-repeat;
			color: white;
			width: 42%;
			border-radius: 10rpx 0 0 10rpx;
		}

		.right {
			position: relative;
			background: #58a;
			background: radial-gradient(circle at top left, transparent 5px, #fffcfc 0) top left, radial-gradient(circle at bottom left, transparent 5px, #fffcfc 0) bottom left;
			background-size: 100% 60%;
			background-repeat: no-repeat;
			width: 58%;
			color: white;
			border-radius: 0 10rpx 10rpx 0;
		}
	
	.right::after {
			content: "";
			position: absolute;
			top: 12rpx;
			height: 140rpx;
			border-left: 1rpx dashed #ffced0;
		}

		.wrapper .pirce {
			font-size: 24rpx;
			font-weight: bold;
			color: #cc4e5e;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
			margin-top: 25rpx;

			text {
				font-size: 32rpx;
			}
		}

		.wrapper .pircecom {
			font-size: 24rpx;
			color: #cc4e5e;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.wrapper .right {
			padding-top: 20rpx;
		}

		.wrapper .right .time {
			line-height: 60rpx;
			height: 60rpx;
			font-size: 24rpx;
			margin-left: 20rpx;
			color: #666;
		}

		.wrapper .right .nums {
			position: absolute;
			right: 20rpx;
			line-height: 60rpx;
			height: 60rpx;
			top: 40rpx;
			color: #cc4e5e;
			font-weight: bold;
			font-size: 24rpx;

			text {
				font-size: 30rpx;
			}
		}

	}

	.side-line {
		width: 50%;
	}

	.i_rItem {
		padding-bottom: 28rpx;

		.i_rImage {
			width: 100%;
			height: 350rpx;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			background: #f6f7fb;
			overflow: hidden;
		}

		.i_rTit {
			min-height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			margin-top: 8rpx;
		}

		.i_rFee {
			height: 44rpx;
			line-height: 44rpx;
			color: #e9423e;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 8rpx;
		}
	}

	.list {
		display: flex;
	}

	.card {
		font-size: 30rpx;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.card>image {
		width: 100%;
		flex-shrink: 0;
		background-color: #f6f6f6;
		border-radius: 10rpx 10rpx 0 0;
		height: 345rpx !important;
		vertical-align: middle;
		max-width: 480rpx;
	}

	.card-right {
		padding: 20rpx;
		min-width: 300rpx;
		position: relative;
	}

	.name {
		font-size: 28rpx;
		height: 70rpx;
		line-height: 35rpx;
		overflow: hidden;
	}

	.price {
		color: red;
		font-size: 32rpx;
		font-weight: 700;
		padding: 12rpx 0;
	}

	.old-price {
		color: #999;
		font-size: 24rpx;
	}

	.residue {
		font-size: 24rpx;
		color: #a80101;
	}

	.bnt-box {
		text-align: right;
		position: absolute;
		width: 170rpx;
		bottom: 20rpx;
		right: 20rpx;
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
	}

	.no-card image {
		height: 160rpx;
		width: 160rpx;
		background-color: #f6f6f6;
		border-radius: 50%;
		padding: 40rpx;
	}

	.cxshare {
		position: absolute;
		top: 5rpx;
		right: 100rpx;
		z-index: 9;
		font-size: 18rpx;
		background: rgba(242, 18, 29, 0.4);
		padding: 4rpx 15rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.rightfixed {
		position: fixed;
		right: 10rpx;
		bottom: 15%;
		z-index: 999;

		view {
			width: 70rpx;
			height: 70rpx;
			border: 1px #dfdfdf solid;
			border-radius: 50%;
			line-height: 70rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.5);
			color: #dfdfdf;
			margin-bottom: 20rpx;
			position: relative;
		}
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.listname {
		padding: 20rpx;
		overflow: hidden;

		.names {
			width: 50%;
			float: left;
		}

		.namtext {
			position: relative;
			margin: 10rpx;
			min-height: 200rpx;
			border-radius: 10rpx;
			border: 1px #dedede solid;

			text {
				position: absolute;
				left: 30rpx;
				color: #ef4508;
				top: 20rpx;
				font-size: 30rpx;
			}
		}
	}
</style>